實作axios+v-select模糊查詢
在開始前請先安裝v-select，axios是laravel預設的套件不在另外安裝安裝安裝。
npm install --save-dev vue-select@3.10.5
bootstrap在resources/sass，在這支檔案引用bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
JS檔新增search.js檔案，這裡引入一個Component。
import Fuzzy from './components/search/Fuzzy.vue';
let app = new Vue({
el: '#app',
components: {
'fuzzy-search': Fuzzy
},
})
Fuzzy Component引用vue-select.css並建立vue-select的component物件
<template>
<div id="channel_list">
<div class="form-group">
<label>搜尋使用者名稱</label>
<vSelect v-model="seleted" label="name" :options="searchData" @input="selectedData">
<span slot="no-options">
查無資料!
</span>
</vSelect>
</div>
<div class="form-group" id="select">
<table class="table table-striped table-bordered" style="width:100%">
<tr>
<th>ID</th>
<th>使用者名稱</th>
<th>Email</th>
<th>電話</th>
</tr>
<tr v-for="(data, index) in showData" :key="index">
<th>{{ data.id }}</th>
<th>{{ data.username }}</th>
<th>{{ data.email }}</th>
<th>{{ data.phone }}</th>
</tr>
</table>
</div>
</div>
</template>
<script>
import 'vue-select/dist/vue-select.css'
import vSelect from 'vue-select'
Vue.component('vSelect', vSelect)
export default {
data() {
return {
btnSelect: 'btn btn-primary',
url: `https://jsonplaceholder.typicode.com/users`,
seleted: '',
showData: []
}
},
computed:{
searchData() {
let searchArray = []
_.findKey(this.showData, function(e, key) {
searchArray.push(e.username)
})
return searchArray
}
},
mounted() {
this.getDefaultSearchData()
},
methods: {
getDefaultSearchData(){
this.getApiData(this.url)
},
getApiData(url){
axios.get(url)
.then(
response => (
this.showData = response.data
)
)
.catch(error => {
console.log(error)
this.errored = true
})
},
selectedData(){
if (this.seleted == '' || this.seleted == null) {
this.getDefaultSearchData()
}else{
this.getApiData(this.url+`?username=${this.seleted}`)
}
},
},
}
</script>
先執行mounted()中的getApiData()透過API取得資料後，組到showData陣列裡。
之後searchData()，會組下拉選單的資料，再使用vue-select，把陣列綁定到options選項。
頁面上的下拉選單和表格，就會顯示陣列中的使用者資料。
當下拉選單選擇使用者名稱後，會執行selectedData()，去找使用者的單筆資料。
<!-- search.blade.php -->
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
</head>
<body>
<div class="container">
<div v-cloak id="app" class="content">
<form action="" method="POST">
{{ csrf_field() }}
<h2
id="title"
class="text-center text-black font-weight-bold"
style="margin-bottom:20px;">
模糊查詢
</h2>
<fuzzy-search></fuzzy-search>
</form>
</div>
</div>
<script src="{{mix('js/app.js')}}"></script>
<script src="{{mix('js/search.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{mix('/css/app.css')}}">
</body>
</html>
RoutesRoute::get('/search', function () {
return view('search');
});
上面步驟完成之後，我們要進行編譯，請在webpack.mix.js檔案，新增search.js、app.sass檔案
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/search.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
做完之後，執行編譯指令
npm run watch
$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
啟動之後，輸入網址為http://127.0.0.1:8000/search
畫面載入時，系統透過API抓使用者全部資料，並顯示在列表上，下拉選單則是顯示全部使用者姓名。
選擇後，系統會偵測選到的使用者姓名，更新列表與下拉選單。
Resource
jsonplaceholder
iThome鐵人賽
看影片追技術